<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="/WEB-INF/config/c.tld" prefix="c" %>
<%@ taglib prefix="fn" uri="/WEB-INF/config/fn.tld" %>
<%@ taglib prefix="fmt" uri="/WEB-INF/config/fmt.tld" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>
        辽宁省农业科学院技术转移服务平台
    </title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Owl Carousel Assets -->
    <link href="owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <!-- Custom Fonts -->
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
    <!-- jQuery and Modernizr-->
    <script src="js/jquery-2.1.1.js"></script>
    <!-- Core JavaScript Files -->
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .tabs {
            position: relative;
            width: 560px;
            height: 578px;
        }

        .tab-pane {
            display: inline-block;
        }

        .tabs input[type='radio'] {
            position: absolute;
            clip: rect(0, 0, 0, 0)
        }

        .tab-item {
            display: block;
            position: relative;
            height: 40px;
            line-height: 40px;
            width: 272px;
            cursor: pointer;
            padding: 0 10px;
            color: #8D8D8D;
        }
        .tabs input[type='radio']:checked + .tab-item {
            color: #07863F;
        }

        .tab-item:after {
            position: absolute;
            content: '';
            color: #07863F;
            height: 4px;
            width: 100%;
            background: #07863F;
            left: 0;
            bottom: 2px;
            transition: .3s;
            transform: scaleX(0)
        }



        /*图标区域*/

        /* 未选中状态的图标 */
        .tab-item::before {
            content: '';
            display: inline-block;
            width: 24px; /* 调整为您的图标实际宽度 */
            height: 24px; /* 调整为您的图标实际高度 */
            margin-right: 10px;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-size: contain;
        }

        #tab01 + .tab-item::before {
            background-image: url('images/icon_team_unselected.png');
        }

        #tab02 + .tab-item::before {
            background-image: url('images/icon_patent_unselected.png');
        }

        /* 选中状态的图标 */
        .tabs input[type='radio']:checked + .tab-item::before {
            content: '';
            display: inline-block;
            width: 24px; /* 调整为您的图标实际宽度 */
            height: 24px; /* 调整为您的图标实际高度 */
            margin-right: 10px;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-size: contain;
        }

        #tab01:checked + .tab-item::before {
            background-image: url('images/icon_team_selected.png');
        }

        #tab02:checked + .tab-item::before {
            background-image: url('images/icon_patent_selected.png');
        }


        /*end*/
        .tabs input[type='radio']:checked + .tab-item:after {
            transform: scaleX(1)
        }

        .tab-content {
            position: absolute;
            /*background: #eee;*/
            /* padding:20px;*/
            left: 0;
            top: 36px;
            bottom: 0;
            right: 0;
            transition: .3s;
            opacity: 0;
            transform: translateY(50px)
        }

        .tabs input[type='radio']:checked + .tab-item + .tab-content {
            z-index: 1;
            opacity: 1;
            transform: translateY(0);
            height: 92.5%;
        }

        .dot-td::before {
            /*padding-left: 10px;  !* 以10px为例，您可以根据需要调整该值 *!*/
            content: '';    /* 这将创建一个空的伪元素 */
            display: inline-block;   /* 使其可以设置宽度和高度 */
            width: 6px;   /* 圆点的直径 */
            height: 6px;   /* 圆点的直径 */
            margin-right: 4px;   /* 与文本之间的距离 */
            background-color: #000;   /* 圆点的颜色 */
            border-radius: 50%;   /* 使其成为完美的圆形 */
            vertical-align: middle;   /* 使其与文本垂直对齐 */
        }
        /* 为表格的顶部设置实线分隔 */
        table {
            margin-left: 10px;
            margin-top: 5px;
            border-top: 2px solid #DBDBDB; /* 颜色可以根据需要进行调整 */
        }

        /* 为每个 <tr> 元素设置虚线分隔 */
        table tr:not(:last-child) { /* 不为最后一行设置边框，避免双重边框 */
            border-bottom: 1px dashed #DBDBDB; /* 颜色可以根据需要进行调整 */
        }

        table tr:last-child td {
            border-bottom: 1px dashed #DBDBDB;  /* 设置为你想要的颜色 */
        }


        .show-more {
            display: block;
            width: 560px;
            text-align: center;
            padding: 10px 0;
            text-decoration: none;
            color: #BDBDBD; /* 你可以选择一个颜色 */
            /*background-color: #f5f5f5; !* 这只是一个示例背景色 *!*/
            /*border: 1px solid #ddd; !* 这只是一个示例边框颜色 *!*/
            margin-top: 10px; /* 根据需要调整间距 */
        }

    </style>
</head>

<body>
<div class="tabs" style="margin-bottom: 10px">
    <div class="tab-pane">
        <input type="radio" name="tab" id="tab01" checked/> <label
            class="tab-item" for="tab01" style="font-size:20px;text-align:center">创新团队</label>
        <div class="tab-content">
            <table width="100%">
                <c:forEach items="${innovateList }" var="data">
                    <tr>
                        <td height="35" class="dot-td">
                            <a href="info/view/${data.id}.html" target="_top">
                                <c:set var="testStr" value="${data.cnName}"/>
                                <c:choose>
                                    <c:when test="${fn:length(testStr) > 20}">
                                        <c:out value="${fn:substring(testStr, 0, 15)}..."/>

                                    </c:when>
                                    <c:otherwise>
                                        <c:out value="${testStr}"/>
                                    </c:otherwise>
                                </c:choose>
                            </a>
                        </td>
                        <td width="100">
                            <a href="info/view/${data.id}.html" target="_top">
                                <fmt:formatDate value="${data.createDate}" pattern="yyyy-MM-dd"/>
                            </a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
<%--            <a href="info/list/7.html" style="float:left;position: absolute;top: 535px;" target="_top"><input--%>
<%--                    type="button" style="width: 560px" value="显示更多"></a>--%>
            <a href="info/list/4.html" class="show-more" target="_top">显示更多</a>

        </div>
    </div>
    <div class="tab-pane">
        <input type="radio" name="tab" id="tab02"/> <label class="tab-item"
                                                           for="tab02"
                                                           style="font-size:20px;text-align:center">专利成果</label>
        <div class="tab-content">
            <table width="100%">
                <c:forEach items="${achievementsList }" var="data">
                    <tr>
                        <td height="35">
                            <a href="info/view/${data.id}.html" target="_top">
                                <c:set var="testStr" value="${data.cnName}"/>
                                <c:choose>
                                    <c:when test="${fn:length(testStr) > 20}">
                                        <c:out value="${fn:substring(testStr, 0, 15)}..."/>
                                    </c:when>
                                    <c:otherwise>
                                        <c:out value="${testStr}"/>
                                    </c:otherwise>
                                </c:choose>
                            </a>
                        </td>
                        <td width="100">
                            <a href="info/view/${data.id}.html" target="_top">
                                <fmt:formatDate value="${data.createDate}" pattern="yyyy-MM-dd"/>
                            </a>
                        </td>
                    </tr>
                </c:forEach>

            </table>
<%--            <a href="info/list/4.html" style="float:left;position: absolute;top: 535px;" target="_top"><input--%>
<%--                    type="button" style="width: 560px" value="显示更多"></a>--%>
            <a href="info/list/4.html" class="show-more" target="_top">显示更多</a>
        </div>
    </div>
</div>
</body>
</html>
